<template>
  <div>
    <section class="flex">
      <div class="section-left section-left-head">
        <div v-if="enterpriseLicenseUrl" title="点击查看企业证照大图" @click="uploadPreview('enterpriseLicense')">
          <img :src="enterpriseLicenseUrl" alt="企业证照" />
          <span><a-icon type="eye" />点击查看大图</span>
        </div>
      </div>
      <div class="section-right">
        <a-row>
          <a-col :lg="24" :xl="8"
            ><i class="bold-font ellipsis" :title="baseInfo.name">{{ baseInfo.name }}</i></a-col
          >
          <a-col :lg="12" :xl="8"
            ><i class="status-font" v-if="baseInfo.statusName">{{ baseInfo.statusName }}</i></a-col
          >
          <a-col :lg="12" :xl="8"
            ><i class="status-font" v-if="baseInfo.size">{{ baseInfo.size }}</i></a-col
          >
        </a-row>
        <a-row>
          <a-col :lg="12" :xl="8"
            ><span>统一社会信用代码:</span><span :title="baseInfo.code">{{ baseInfo.code }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>注册号:</span><span :title="baseInfo.registrationNumber">{{ baseInfo.registrationNumber }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>注册资本:</span
            ><a-statistic class="statistic" :value="baseInfo.registeredCapital"></a-statistic><span>{{ baseInfo.registeredCapitalUnitName }}</span></a-col
          >
          
        </a-row>
        <a-row>
          <a-col :lg="12" :xl="8"
            ><span>法定代表人:</span><span>{{ baseInfo.legal }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>公司类型:</span><span :title="baseInfo.typeName">{{ baseInfo.typeName }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>行业分类:</span><span :title="baseInfo.industryName">{{ baseInfo.industryName }}</span></a-col
          >
        </a-row>
        <a-row>
          <a-col :lg="12" :xl="8"
            ><span>成立日期:</span><span>{{ baseInfo.establishTime }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>核准日期:</span><span>{{ baseInfo.approvalTime }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>经营期限:</span><span>{{ baseInfo.businessTermLong === '是' ? '长期' :baseInfo.businessTerm }}</span></a-col
          >
        </a-row>
        <a-row>
          <a-col :lg="12" :xl="8"
            ><span>公司分类:</span><span :title="baseInfo.companyClassName">{{ baseInfo.companyClassName }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span style="display:none"></span><span style="padding-left: 0" :title="baseInfo.companyClassDetailsName">{{ baseInfo.companyClassDetailsName }}</span></a-col
          >
         
        </a-row>
         <a-row>
          <a-col :lg="12" :xl="8"
            ><span>公司代码:</span><span >{{ baseInfo.companyCode }}</span></a-col
          >
            <a-col :lg="12" :xl="8"
            ><span>销售组织:</span><span >{{ baseInfo.companySalesOrganization }}</span></a-col
          >
        </a-row>
        <a-row>
          <a-col
            ><span>住所:</span><span class="all-line">{{ baseInfo.addressAreaLabel }} {{ baseInfo.addressDetails }}</span></a-col
          >
        </a-row>
        <a-row>
          <a-col
            ><span>经营范围:</span><span class="all-line">{{ baseInfo.businessScope }}</span></a-col
          >
        </a-row>
         <a-row>
          <a-col :lg="12" :xl="8"
            ><span>政策管理员:</span><span>{{ baseInfo.policyAdminName }}</span></a-col
          >
          <a-col :lg="12" :xl="8"
            ><span>政策管理主管:</span><span>{{ baseInfo.policyChargeName }}</span></a-col
          >
         
        </a-row>
      </div>
    </section>
    <section>
      <div class="section-header">股东信息</div>
      <div class="section-table">
        <div>
          <a-table
            class="hte-table-content"
            :columns="reservationColumns"
            :data-source="reservationData"
            :loading="tabLoading"
            :pagination="false"
            bordered
            size="middle"
          >
            <template slot="num" slot-scope="text, record, index">
              {{ parseInt(index) + 1 }}
            </template>
            <template slot="proportion" slot-scope="text">
              {{ text ? text + '%' : '' }}
            </template>
            <template slot="name" slot-scope="text,record">
              
              <a-button  type="link" @click="handleClick('det',record)">{{ text}}</a-button>
            </template>  
          </a-table>
        </div>
      </div>
    </section>
    <section v-if="stockRightImageUrl">
      <div class="section-header">股权穿透图</div>
      <div class="section-table">
        <div class="section-left upload-stock">
          <div title="点击查看股权穿透大图" @click="uploadPreview('stockRightImage')">
            <img :src="stockRightImageUrl" alt="股权穿透图" />
            <span><a-icon type="eye" />点击查看大图</span>
          </div>
        </div>
      </div>
    </section>
    <section v-if="personnelList.length">
      <div class="section-header mb0">主要人员信息</div>
      <div class="section-content">
        <div  v-for="(item, index) of personnelList"  :key="index" class="info-box">
          <p :title="item.userName">{{ item.userName || '-' }}</p>
          <p :title="item.typeName">{{ item.typeName || '-' | ellipsis(13) }}</p>
        </div>
      </div>
    </section>
    <section>
      <div class="section-header">企业参股控股公司</div>
      <div class="section-table">
        <div>
          <a-table
            class="hte-table-content"
            :columns="holdingColumns"
            :data-source="holdingData"
            :loading="holdLoading"
            :pagination="false"
            bordered
            size="middle"
          >
            <template slot="num" slot-scope="text, record, index">
              {{ parseInt(index) + 1 }}
            </template>
            <template slot="proportion" slot-scope="text">
              {{ text ? text + '%' : '' }}
            </template>  
            <template slot="companyName" slot-scope="text,record">
              
              <a-button  type="link" @click="handleClick('det',record)">{{ text}}</a-button>
            </template>     
                    
          </a-table>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { getAction, postAction} from '@/api/manage'
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
    defaultOptions: {zIndex: 9999,}
})

export default {
  name: 'InfoBase',
  props: {
    companyId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      options: {
        navbar:false,title:false,
      },
      reservationColumns: [
        {
          title: '序号',
          dataIndex: 'num',
          width: '8%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '股东',
          dataIndex: 'name',
          width: '27%',
          align: 'center',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '股权占比',
          dataIndex: 'proportion',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'proportion' },
        },{
          title: '法定代表人',
          dataIndex: 'legal',
          width: '15%',
          align: 'center',
        },
         {
          title: '成立日期',
          dataIndex: 'establishTime',
          width: '15%',
          align: 'center',
        },
         {
          title: '企业状态',
          dataIndex: 'statusName',
          width: '15%',
          align: 'center',
        },
      ],
      reservationData: [],
      holdingColumns: [
        {
          title: '序号',
          dataIndex: 'num',
          width: '8%',
          align: 'center',
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '公司名称',
          dataIndex: 'companyName',
          width: '17%',
          align: 'center',
          scopedSlots: { customRender: 'companyName' },
        },
        {
          title: '统一社会信用代码',
          dataIndex: 'companyCode',
          width: '15%',
          align: 'center',
        },
        {
          title: '股权占比',
          dataIndex: 'proportion',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'proportion' },
        },
         {
          title: '法定代表人',
          dataIndex: 'legal',
          width: '15%',
          align: 'center',
        },
         {
          title: '成立日期',
          dataIndex: 'establishTime',
          width: '15%',
          align: 'center',
        },
         {
          title: '企业状态',
          dataIndex: 'statusName',
          width: '15%',
          align: 'center',
        },
      ],
      holdingData: [],
      tabLoading: false,
      holdLoading: false,
      personnelList: [],
      baseInfo: {},
      stockRightImageUrl: '',
      enterpriseLicenseUrl: '',
    }
  },
  mounted() {
    this.getCnompanyInitData()
    // this.getCompanyTeamData()
    // this.getShareholders()   
    // this.getHoldingParticipatio()
  },
  methods: {
    /**
     * 股东信息
     */
    getShareholders() {
      this.tabLoading = true
      getAction('/libraryCompany/hteLibCompanyShareholder/queryByCompanyId', { companyId: this.companyId }).then(
        (res) => {
          if (res.code == 200 && res.result) {
            res.result.forEach((item, index) => {
              item.key = index
            })
            this.reservationData = res.result || []
            this.tabLoading = false
          } else {
            this.$message.warning('数据加载失败:' + res.message)
            this.tabLoading = false
          }
        }
      )
    },
    /**
     * 公司库企业参股控股公司
     */
    getHoldingParticipatio() {
      this.holdLoading = true
      getAction('/libraryCompany/hteLibCompanyHoldingParticipation/queryByCompanyId', {
        companyId: this.companyId,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          res.result.forEach((item, index) => {
            item.key = index
          })
          this.holdingData = res.result || []
          this.holdLoading = false
        } else {
          this.$message.warning('数据加载失败:' + res.message)
          this.holdLoading = false
        }
      })
    },
    /**
     * 主要人员信息
     */
    getCompanyTeamData() {
      getAction('/libraryCompany/hteLibCompanyTeam/queryByCompanyId', { companyId: this.companyId }).then((res) => {
        if (res.code == 200 && res.result) {
          this.personnelList = res.result || []
          //过滤空数据
          this.personnelList = this.personnelList.filter(item=>{
            return !!item.userName
          })
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
      })
    },
    /**
     * 基本信息
     */
    getCnompanyInitData() {
      this.tabLoading = true
      this.holdLoading = true
      postAction('/libraryCompany/hteLibCompany/queryById', { id: this.companyId }).then((res) => {
        if (res.code == 200 && res.result) {
           let data = res.result 
          this.baseInfo = res.result || {}
          /**
            * 主要人员信息
          */
          this.personnelList = data.companyTeams || []
          //过滤空数据
          this.personnelList = this.personnelList.filter(item=>{
            return !!item.userName
          })
           /**
         * 公司库企业参股控股公司
         */
          data.prticipations.forEach((item, index) => {
            item.key = index
          })
          this.holdingData = data.prticipations || []
          
          /**
            * 股东信息
          */
          data.companyShareholders.forEach((item, index) => {
              item.key = index
            })
            this.reservationData = data.companyShareholders || []
            
          // 企业证照
          if (this.baseInfo.enterpriseLicense) {
            this.getImageUrl('enterpriseLicense')
          }
          // 股权穿透图
          if (this.baseInfo.stockRightImage) {
            this.getImageUrl('stockRightImage')
          }
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
      }).catch(res=>{}).finally(res=>{
        this.holdLoading = false
          this.tabLoading = false
      })
    },
    getImageUrl(type) {
      const params = {
        busField: 'hteLibBrand',
        busType: 'picture',
        dbKey: 'Trd',
        ftpKey: 'ftp',
        id: this.baseInfo[type],
      }
      getAction('/common/getImage', params).then((res) => {
        if (res.code === 1) {
          this[type + 'Url'] = res.data
        }
      })
    },
    uploadPreview(targe) {
      this.$viewerApi({
        images: [this[targe + 'Url']],
        options: this.options,
      })
    },
      handleClick(type, item) {
      if (type === 'det') {
        if(!item.shareholderCompanyId){
          this.$message.error(`公司库不存在${item.companyName}信息`)
          return
        }
        let path = `/company/info?id=${item.shareholderCompanyId}`
   
          let urlJump = this.$router.resolve({ path: path })
          window.open(urlJump.href, '_blank')
        }
      }
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.flex {
  display: flex;
}
section {
  .section-left {            
    > div {
      height: 100%;
      overflow: hidden;
      border: 1px solid #e3e6ec;
      text-align: center;
      cursor: pointer;
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -45px;
        opacity: 0;
        z-index: 1;
        line-height: initial;
        color: #fff;
        font-size: 12px;
        i {
          font-size: 14px;
          vertical-align: middle;
          margin-right: 5px;
          margin-top: -3px;
        }
      }
      &:before{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }
      &:hover{
        &:before,span{opacity: 1;}
      }      
    }
    img {
      width: auto;
      height: 100%;
    }
    &.upload-stock {
      width: 100%;
      height: 150px;
      margin-top: 10px;
      >div{width: 100%;}
    }
    &.section-left-head{
      max-width: 144px;
      max-height: 144px;
      width: 13vw;
      height: 13vw;
      overflow: hidden;
      border: 1px solid #e3e6ec;
      background-color: #fff;
    } 
  }
  .section-right {
    margin-left: 30px;
    flex: 1;
    /deep/ .ant-row {
      margin-bottom: 13px;
      &:first-child {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    /deep/ .ant-col {
      color: #333333;
      display: flex;
      >span {
        position: relative;
        &:first-child {
          padding-left: 15px;
          &:before {
            display: inline-block;
            content: '';
            background: url('../../../../assets/dbcircle.png');
            width: 11px;
            height: 12px;
            border-radius: 6px;
            top: 5px;
            left: 0;
            position: absolute;
          }
        }
        &:last-child {
          flex: 1;
          color: #666666;
          word-break: break-all;
          padding-left: 8px;
          &:not(.all-line){
            &:extend(.ellipsis);
          }          
        }
      }
      .statistic .ant-statistic-content{font-size: 14px;color: #666666;word-break: break-all;padding-left: 8px;}
    }
    i {
      font-style: inherit;
    }
    .bold-font {
      font-size: 16px;
      font-weight: bold;
    }
    .status-font {
      background-color: #4bb09e;
      border-radius: 4px;
      color: #fff;
      padding: 6px 12px;
      margin-left: 14px;
    }
  }
  .section-content {
    display: flex;
    flex-wrap: wrap;
    .info-box {
      min-width: 110px;
      max-height: 75px;
      border-radius: 4px;
      border: solid 1px #cccccc;
      text-align: center;
      padding: 10px 10px 6px 10px;
      margin-right: 16px;
      margin-top: 16px;
      > p {
        margin-bottom: 0;
        &:first-child {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 21px;
        }
        &:last-child {
          height: 36px;
          margin-top: 3px;
          text-align: center;
          line-height: 17px;
          overflow: hidden;
          color: #4095e4;
          display: flex;
          align-items: center;
          justify-content: center;          
        }
      }
    }    
  }
  .mb0{margin-bottom: 0 !important;}
}
.preview-visible {
  /deep/ .ant-modal-close-x i {
    position: relative;
    top: -12px;
    right: -12px;
  }
}
</style>